<template>
  <a-modal :visible="modifyVisible" @ok="handleSubmit">
    <div :style="{ display: 'flex' }">
      <a-card :style="{ width: '360px' }" :bordered="false">
        <a-form
          :model="createform"
          :style="{ width: '340px' }"
          @submit="handleSubmit"
        >
          <a-form-item field="username" label="姓名">
            <a-input
              v-model="createform.username"
              :placeholder="props.dialogTableValue.username"
              readonly="true"
            />
          </a-form-item>
          <a-form-item field="password" label="密码">
            <a-input
              v-model="createform.password"
              :placeholder="props.dialogTableValue.password"
            />
          </a-form-item>
          <a-form-item field="email" label="邮箱">
            <a-input
              v-model="createform.email"
              :placeholder="props.dialogTableValue.email"
            />
          </a-form-item>
          <a-form-item field="mobile" label="手机号">
            <a-input
              v-model="createform.mobile"
              :placeholder="props.dialogTableValue.mobile"
            />
          </a-form-item>
          <a-form-item field="nickname" label="昵称">
            <a-input
              v-model="createform.nickname"
              :placeholder="props.dialogTableValue.nickname"
            />
          </a-form-item>
        </a-form>
      </a-card>
    </div>
  </a-modal>
</template>

<script setup>
  import { ref, defineEmits } from 'vue-demi';
  import { modifyZuhu } from '@/api/user';
  import { Message } from '@arco-design/web-vue';

  const emits = defineEmits(['fetchData']);

  const createform = ref({
    id: '',
    username: '',
    password: '',
    email: '',
    mobile: '',
    role: 3,
    nickname: '',
  });
  const props = defineProps({
    dialogTableValue: {
      type: Object,
      default: () => {},
    },
  });
  const handleSubmit = async () => {
    createform.value.id = props.dialogTableValue.id;
    createform.value.username = props.dialogTableValue.username;
    if (createform.value.email === '') {
      createform.value.email = props.dialogTableValue.email;
    }
    if (createform.value.password === '') {
      createform.value.password = props.dialogTableValue.password;
    }
    if (createform.value.mobile === '') {
      createform.value.mobile = props.dialogTableValue.mobile;
    }
    if (createform.value.nickname === '') {
      createform.value.nickname = props.dialogTableValue.nickname;
    }
    await modifyZuhu(createform.value);
    Message.success('修改成功');
    emits('fetchData', 1, 20, 2);
  };
</script>
